<template>
  <view class="user-list">
    <van-cell-group custom-class="user-list-item">
      <view class="user-list-photo van-hairline--bottom">
        <view class="user-info-photo" @click="chooseImage">
          <image v-if="userInfo.avatar" :src="userInfo.avatar" ></image>
          <image v-else src="../../../static/touxiang.png" alt=""></image>
        </view>
        <text class="user-list-photo-name">{{userInfo.nickname}}</text>
      </view>
      <van-cell title="昵称" is-link center url="/pages/user/reset/resetName">
        <text class="color-9">修改</text>
        <van-icon slot="right-icon" name="arrow" class="van-cell__right-icon" />
      </van-cell>
    </van-cell-group>
 
    <van-cell-group custom-class="user-list-item">
       <van-cell title="绑定手机号" is-link center url="/pages/user/reset/binPhone" >
        <text class="color-9">{{userInfo.phone || '未绑定'}}</text>
        <van-icon slot="right-icon" name="arrow" class="van-cell__right-icon" />
      </van-cell>
      <van-cell title="修改密码" is-link center url="/pages/user/reset/resetPwd">
        <text class="color-9">修改</text>
        <van-icon slot="right-icon" name="arrow" class="van-cell__right-icon" />
      </van-cell>
    </van-cell-group>
		<view class="user-list-btn" @click="logOut">退出登录</view>

  </view>
</template>
<script>
export default {
  name: 'UserIndex',
  data () {
    return {
		userInfo: {
			avatar: '',
			nickname: 'wasdokij',
			phone: ''
		}
    }
  },
  methods: {
		chooseImage () {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: (res) => {
					this.userInfo.avatar = res.tempFilePaths[0]
						console.log(JSON.stringify(res.tempFilePaths));
				}
			})
		},
    logOut () {
			uni.showModal({
				title: '提示',
				content: '确定退出登录？',
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/user/login/index'
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
    }
  }
}
</script>
<style lang="scss" scoped>
  .color-9{
    color: #999;
  }
  image {
	  width: 100%;
	  height: 100%;
  }
  .user-list{
    &-photo{
      padding: 40upx 0;
      text-align: center;
      background-color: #fff;
      .user-info-photo{
				width: 120upx;
				height: 120upx;
				margin: auto;
				text-align: center;
				border-radius: 50%;
				overflow: hidden;
				box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
      }
      &-name{
        margin-top: 20upx;
      }
    }

    &-item{
      margin-bottom: 20upx;
    }

    &-btn{
      padding: 10px 15px;
      line-height: 24px;
      color: #333;
      text-align: center;
      overflow: hidden;
      background-color: #fff;
    }
  }
</style>
